﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<meta name="viewport" content="width=device-width" />
	<title>Zoro - Album</title>
	<link href="/css/bootstrap.min.css" rel="stylesheet" />
	<link href="/css/light-bootstrap-dashboard.css" rel="stylesheet" />
	<link href="/css/font-awesome.min.css" rel="stylesheet">
	<link href="/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<body>

<div class="wrapper">
    <div th:replace="admin/include/menu :: #layout-menu"></div>
    <div class="main-panel">
		<div th:replace="admin/include/top :: #layout-top"></div>
        <div class="content">
            <div class="container-fluid">
            	<div class="card">
            		<div class="content">
           				<div class="row">
		            		<div class="col-md-3"><input type="text" id="title" placeholder="主题名称，支持模糊查询" class="form-control"></div>
		            		<div class="col-md-3"><input type="text" id="camerist" placeholder="摄影师，支持模糊查询" class="form-control"></div>
		            		<div class="col-md-3">
		            			<select id="status" class="selectpicker" data-title="主题状态" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
		                            <option value="">All</option>
		                            <option value="0">未开始</option>
		                            <option value="1">进行中</option>
		                            <option value="2">已结束</option>
		                        </select>
							</div>
							<div class="col-md-3">
		            			<button class="btn btn-info btn-fill btn-wd" onclick="searchTable();">
		            				<i class="fa fa-search"></i> 搜 索
                                </button>
                                <button class="btn btn-default btn-fill" onclick="resetTable();">
		            				<i class="fa fa-refresh"></i> 重 置
                                </button>
							</div>
						</div>
						<br />
						<div class="row">
		                    <div class="col-md-12">
		                        <div class="card">
		                            <div class="toolbar">
		                                <button class="btn btn-round btn-primary btn-fill" onclick="javascript:window.location.href='/admin/topics/add'">
				            				<i class="fa fa-refresh"></i> 创 建
		                                </button>
		                            </div>
		
		                            <table id="topics-table" class="table">
		                                
		                            </table>
		                        </div>
		                    </div>
		                </div>
	            	</div>
            	</div>
            	
            </div>
        </div>
    </div>
</div>

</body>
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="/js/light-bootstrap-dashboard.js" type="text/javascript"></script>
	<script src="/js/bootstrap-table.js"></script>
	<script src="/js/bootstrap-selectpicker.js"></script>
	<script src="/js/sweetalert2.js"></script>
	<script>
	$().ready(function(){
		window.operateEvents = {
	            'click .view': function (e, value, row, index) {
	            	window.location.href = '/admin/photo/view/'+row.id;
	            },
	            'click .edit': function (e, value, row, index) {
	            	window.location.href = '/admin/topics/edit/'+row.id;
	            },
	            'click .remove': function (e, value, row, index) {
	                $.get("/admin/topics/delete/"+row.id,null,function(data){
	                    if(data){
	                    	swal("删除成功！", "", "success");
	                    	searchTable();
	                    } 
	                  });
	            }
	        };
		$("#topics-table").bootstrapTable({
			dataType:'json',
			sidePagination: "server",
			url: '/admin/topics/page',
	        responseHandler: responseHandler,
	        queryParams : queryParams,
	        columns: [
	        	{field : 'id',title : 'ID',align : 'center',visible: false},
	        	{field : '',title : '操作',align : 'center',width : '15%',formatter: formatOperate,events: operateEvents},
	        	{field : 'title',title : '主题名称',align : 'center',width : '25%'},
	        	{field : 'topicTime',title : '活动时间',align : 'center',width : '15%'},
	        	{field : 'camerist',title : '摄影师',align : 'center',width : '15%'},
	        	{field : 'status',title : '状态',align : 'center',width : '9%',formatter: formatStatus},
	        	{field : 'photos',title : '照片数',align : 'center',width : '9%'},
	        	{field : 'creationTime',title : '创建时间',align : 'center',width : '12%'}
	        ],
	        toolbar: ".toolbar",
	        showRefresh: true,
            showToggle: true,
	        showColumns: true,
	        pagination: true,
	        pageSize: 10,
	        icons: {
	            refresh: 'fa fa-refresh',
	            toggle: 'fa fa-th-list',
	            columns: 'fa fa-columns'
	        }
	    });
		$('[rel="tooltip"]').tooltip();
	});
	function queryParams(params) {
	    var param = {
	    		status : $("#status").val(),
	    		camerist : $("#camerist").val(),
	    		title : $("#title").val(),
	        	pageNum : this.pageNumber,
	        	pageSize : this.pageSize
	    	};
	    return param;
	}
	function searchTable() {
		$("#topics-table").bootstrapTable('refresh', queryParams());
	}
	function resetTable() {
		$("#status").val('');
		$("#camerist").val('');
		$("#title").val('');
		$("#topics-table").bootstrapTable('refresh', {silent: true});
	}
	function formatStatus(value,row,index) {
	    var str = '-';
	    if(value == '0'){
	    	str = '未开始';
	    }else if(value == '1'){
	    	str = '进行中';
	    }else if(value == '2'){
	    	str = '已结束';
	    }
	    return str;
	}
	function formatOperate(value,row,index) {
		return [
            '<a rel="tooltip" title="预览" class="btn btn-simple btn-info btn-icon table-action view" href="javascript:void(0)">',
                '<i class="fa fa-image"></i>',
            '</a>',
            '<a rel="tooltip" title="编辑" class="btn btn-simple btn-warning btn-icon table-action edit" href="javascript:void(0)">',
                '<i class="fa fa-edit"></i>',
            '</a>',
            '<a rel="tooltip" title="删除" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)">',
                '<i class="fa fa-remove"></i>',
            '</a>'
        ].join('');
	}
	</script>
	<script th:inline="javascript">
	    var msg = [[${message}]];
	    if(msg != null && msg != ''){
	    	swal(msg, "", "success");
	    }
	</script>
	
</html>
